<template>
  <div class="newProject">
    <nav_bar title='钢材识别' background='#fff' :back="true"  @back="handlerGobackClick"></nav_bar>
    <div class="header">
      <img :src="userInfo.user_info.photo_url" alt="" v-if="userInfo">
      <div class="header-desc">
        <div>{{project_name}}</div>
        <div>{{total}}项目记录</div>
      </div>
    </div>
    <div class="itemList">

      <div class="item">
        <div class="item_name" >车牌号</div>
        <div @click="shoKeyBoardFn" class="input" v-if="plate_num">{{plate_num}}</div>
        <div class="input" @click="shoKeyBoardFn" v-else style="color:gray">如粤A12345</div>
        <img src="../../../static/images/icon/camera.png" alt="" class="icon_camera" @click="uploadCarId">
      </div>
      <div class="desc">
        <div class="item_name" style="font-weight:600">情况反馈</div>
        <textarea v-model="project_desc" placeholder="输入情况反馈" v-if="!showConfirmFlag" auto-height @focus="closeInput"></textarea>
        <div v-else>{{project_desc}}</div>
      </div>
      <div class="btn">
        <form name='pushMsgFm' report-submit @submit='commit' class="tepForm">   
            <button form-type="submit"  class="btn_commit">
                提交
            </button>  
        </form>
      </div>
    </div>
    <van-popup
          :show="showConfirmFlag"
          position="center"
          :close-on-click-overlay="false"
          :overlay="true"
          custom-style="border-radius:10px"
          @close="closePopup"
        >
        <div class="popup_wrapper">
          <div class="popup_header">
            <img src="../../../static/images/icon/gou.png" alt="" class="gou_img">
          </div>
          <div class="popup_content">
            新建项目成功！请选择下一步操作
          </div>
          <div class="popup_footer">
            <div @click="toRecord">收货记录</div>
            <div @click="toCountSteel">点条识别</div>
            <div @click="back">返回</div>
          </div>
        </div>
    </van-popup>
    <van-popup
          :show="showKeyboard"
          position="bottom"
          duration="150"
          overlay-style="background:none"
          @close="closeKeyBord"
        >
    <plate-number-keyboard :show="true" @getResult="setNumber" @closeKeyBoard="getKeyBoardState"></plate-number-keyboard>
    </van-popup>
  </div>
</template>
<script>
import {mapState} from 'vuex';
export default {
  data() {
    return {
      lastPage:'',//上一页的来源
      showConfirmFlag:false,
      total:'',//头部的数量
      showKeyboard:false,//显示键盘
      project_id:'',
      project_item:'',
      project_name:'',
      project_desc:'',
      userInfo:'',
      plate_num:'',
      itemId:'',//新建的识别项目id
    }
  },

  methods: {
    closeKeyBord(){
      this.showKeyboard=false
    },
    toCountSteel(){
      var url = `/pages/countSteel/main?projectId=${this.project_id}&name=${this.project_name}&itemId=${this.itemId}&plateNum=${this.plate_num}`;
      this.$currency.navigateTo(url)
    },
    toRecord(){
      var url = `/pages/receiveRecord/main?projectId=${this.project_id}&name=${this.project_name}&itemId=${this.itemId}&plateNum=${this.plate_num}`
      this.$currency.navigateTo(url)
    },
    back(){
      if(this.lastPage=='pages/steelList/main'){
        this.$currency.navigateTo(`/pages/steelList/main?id=${this.project_id}`)
        return
      }
      wx.navigateBack({
        delta:1
      })
    },
    closePopup(e){
      this.showConfirmFlag=false
    },
    getLastPage(){//避免涂鸦返回后刷新数据
      let arr=getCurrentPages();
      let index=arr.length-2>=0?arr.length-2:0;
      let lastPage=arr[index].route;//上一页的页面
      this.lastPage=lastPage
    },
    shoKeyBoardFn(){
      // this.showKeyboard=Math.random();//小程序observe组件setData内改变了show但没有监听到
      // console.log(this.showKeyboard)
      this.showKeyboard=true
    },
    closeInput(){
      this.showKeyboard=false;
    },
    setNumber(e){//获取输入的车牌号
      this.plate_num=e.target.value
    },
    // getKeyBoardState(e){
    //   if(e.mp.detail==true){
    //     this.showKeyboard=false;
    //   }
    // },
    uploadCarId(){
      //上传车牌号识别
      this.uploadCarIdHandle('camera');
    },
    async uploadCarIdHandle(item){
      //上传车牌号的处理函数
      let res=await this.$currency.upLoadPlateNum(this,item);
      const data=JSON.parse(res.data);
      const img_url=data.data.img_url;
      const id=data.data.id;
      const plateResult=await this.$request.postData('/ucenter/getNumberPlateTwo',{
        img_id:id
      })
      if(plateResult.data.level=='success'){
        this.plate_num=plateResult.data.data
      }else{
        this.$currency.showToast(plateResult.data.message)
      }
    },
    handlerGobackClick(){
      wx.navigateBack({
        delta: 1
      })
      
    },
   async getUserInfo(){
      var userToken=wx.getStorageSync('userToken')
      let res=await this.$request.getData('/ucenter/getUserInfo',{user_token:userToken})
        if(res.data.data instanceof Object){
        this.userInfo=res.data.data

        }
    },
    async commit(e){
      //提交
      var userToken=wx.getStorageSync('userToken')
      if(this.plate_num==''){
        this.$currency.showToast('车牌号不能为空');
        return
      }
      var regExp = /(^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$)/
      if(!regExp.test(this.plate_num)){
        this.$currency.showToast('车牌号码有误');
        return
      }
      let params={
        project_id:this.project_id,//项目id，修改时传入
        plate_num:this.plate_num,
        form_id:e.target.dataset.formId,
        content:this.project_desc,
        user_token:userToken
      }
      let res=await this.$request.postData('/ucenter/insertPointItemByOneV2',params);
      
      if(res.data.level=='success'){
        this.itemId=res.data.data.id
        // setTimeout(()=>{
        //   this.$currency.navigateTo(`/pages/steelList/main?id=${this.project_id}`)
        // },1500)
        this.showConfirmFlag=true;
      }else{
        this.$currency.showToast(res.data.message);
      }
    },
    initData(){
      this.showKeyboard=false;
      this.project_id='';
      this.project_item='';
      this.project_name='';
      this.project_desc='';
      this.userInfo='';
      this.plate_num='';
      this.showConfirmFlag=false;
      this.itemId=''
    }

  },
  onShow(){
    this.initData();
    this.getLastPage();
    console.log(this.lastPage,7777)
    this.total=this.$root.$mp.query.total||0;
    this.project_name=this.$root.$mp.query.name;
    this.project_id=this.$root.$mp.query.projectId;//项目id
    this.getUserInfo()
  },
  onLoad(options){
    
  },

}
</script>
<style lang="scss" scoped>
.header{
    display: flex;
    align-items: center;
    width: 100%;
    color:#000;
    img{
      width: 60px;
      height: 60px;
      border-radius: 50%;
    }
    .header-desc{
      margin-left: 30px;
      &>div{
        margin:2.5px 0;
      }
      &>div:first-child{
        font-weight: 600
      }
    }
}
  .newProject{

    width: calc(100% - 40px);
    margin-left: 20px;
    font-size: 16px;
  }
  .item{
    display: flex;
    align-items: center;
    padding:20px 0;
    height: 20px;
    line-height: 20px;
    border-bottom: 1px solid #eee;
    .item_name{
      width: 100px;
      font-weight: 600;
    }
    .icon_camera{
      width: 45px;
      height: 45px;
    }
    .placeholder{
        margin-left:20px;
        color: gray;
      }
      .input{
        flex:1;
        line-height: 50px;
      }
    & input{
      margin-left:20px;
      
    }
  }
  .desc{
    margin-top:10px;
  }
  textarea{
    margin-top:10px;
    width:100%;
    height: 60px;
  }


  .btn{
    margin-top:30px;
    margin-bottom: 30px;
    display: flex; 
    position: fixed;
    width: calc(100% - 40px);
    bottom:60px;
    justify-content: space-around;
  }
  .btn_commit{
    width: 180px;
    height: 45px;
    line-height: 45px;
    color:#fff;
    text-align: center;
    border-radius: 10px;
    background: #23b6ac;
  }
  .btn_commit_disabled{
    background: gray;
  }
  .tip{
    margin-top:5px;
    font-size: 14px
  }

  //弹出框
  .popup_wrapper{
    margin: 0 auto;
    width: 80vw;
    padding:5px;
    box-sizing: border-box;
    border-radius: 20px;
    .popup_header{
      display: flex;
      justify-content: center;
    }
    .gou_img{
      width: 60px;
      height: 60px;
    }
    .popup_content{
      text-align: center;
      width: 100%;
      height: 60px;
      line-height: 60px;
      margin-bottom: 40px;
      font-weight: 600;
    }
    .popup_footer{
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin-bottom:10px;
      &>div{
        padding:5px 10px;
        background:#409eff;
        color: #fff;
        border-radius: 5px;
      }
    }
  }

</style>

